<template>
  <smt-fab
    ref="fab"
    class="smt-fab"
    :pattern="pattern"
    :content="fab.content"
    :horizontal="fab.horizontal"
    :vertical="fab.vertical"
    :direction="fab.direction"
    :triggerClose="true"
    @trigger="trigger"
    @fabClick="fabClick"
  >
    <smt-icons
      class="smt-fab-icon"
      slot="icon"
      slot-scope="{ item, color }"
      :type="item.iconPath"
      size="14"
      :color="color"
    ></smt-icons>
  </smt-fab>
</template>

<script>
import { mapState } from "vuex";
import { getColor } from "@/utils";

export default {
  options: { styleIsolation: "shared" },
  methods: {
    trigger({ item }) {
      if (item.gotoPath === "back") {
        uni.navigateBack({ delta: 1 });
        return;
      }
      const pages = getCurrentPages();
      const page = pages[pages.length - 1];
      if (!item.gotoPath.includes(page.route)) {
        uni.navigateTo({
          url: item.gotoPath,
          fail() {
            uni.switchTab({
              url: item.gotoPath,
            });
          },
        });
      }
    },
    fabClick() {
      console.log("fabClick");
    },
  },
  computed: {
    ...mapState("fabButton", ["fab"]),
    ...mapState("setting", ["cameTheme"]),
    pattern() {
      const { color, selectedColor, backgroundColor, buttonColor } =
        this.fab.pattern;
      const { color3, themeColor } = this.cameTheme;
      return {
        // 文字默认颜色
        color: color || color3,
        // 文字选中时的颜色
        selectedColor: selectedColor || themeColor,
        // 背景色
        backgroundColor: backgroundColor || "#ffffff",
        // 按钮背景色
        buttonColor:
          buttonColor ||
          getColor([this.cameTheme.fabStart, this.cameTheme.fabEnd]),
      };
    },
  },
};
</script>

<style lang="scss">
// #ifdef MP-ALIPAY
.smt-fab {
  .smt-fab__content--other-platform {
    box-shadow: 0px 2px 10px 0px $smt-shadow-fab !important;
  }
}
// #endif
</style>

<style lang="scss" scoped>
// #ifndef MP-ALIPAY
::v-deep .smt-fab__content--other-platform {
  box-shadow: 0px 2px 10px 0px $smt-shadow-fab !important;
}

// #endif
</style>
